<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
        <style>
            .wrapper{
                display: flex;
                flex-direction: column;
                width: 800px;
                height: 600px;
                align-items: baseline;
                flex-wrap: nowrap;
                justify-content: space-between;
                margin: 0 auto;
                box-shadow: 1px 5px 10px 0px #666;
            }
            span{
                display: inline-block;
				text-align: right;
				width: 100px;
				padding-right:10px ;
            }
            .inputbox{
                box-sizing: border-box;
                border: none;
                border-bottom: 1px solid #666;
            }
            textarea{
                width: 80%;
                height: 80px;
                margin: 0 auto;
            }
            .btns{
                width: 800px;
                height: auto;
                display: flex;
                justify-content: space-around;
            }
        </style>
	</head>
    <script>
        window.onload = function() {
            let oBtn = document.getElementById('submit')
            oBtn.onclick = function() {
                // let oUsername = document.getElementsByName('Username')
                // console.dir(oUsername[0].value) //控制台输出

                document.getElementById('result').innerText += document.getElementById('name').value
                document.getElementById('result').innerText += document.getElementById('password').value
                document.getElementById('result').innerText += document.getElementById('confpassword').value
                
                let oMap = new Map()
                oMap.set('M',' 男')
                oMap.set('F',' 女')
                oMap.set('basketball',' 篮球')
                oMap.set('run',' 跑步')
                oMap.set('swim',' 游泳')
                oMap.set('computer',' 计算机应用与技术')
                oMap.set('software',' 软件技术')
                let oSex = document.getElementsByName('sex')
                let oHobby = document.getElementsByName('hobby')
                let oSubject = document.getElementById('subject')
                oSex.forEach(item=>{
                    if(item.checked) {
                        let oValue = item.value
                        //console.log(oMap.get(oValue))
                        document.getElementById('result').innerText += oMap.get(oValue)
                    }
                })
                oHobby.forEach(item=>{
                    if(item.checked) {
                        let oValue = item.value
                        document.getElementById('result').innerText += oMap.get(oValue)
                    }
                })
                var index=oSubject.selectedIndex;
                var sub = oSubject.options[index].text
                document.getElementById('result').innerText += sub
                document.getElementById('result').innerText += document.getElementById('intro').value
            }
        }
            
        </script>
	<body>

        <h1 align="center">表单</h1>

        <div class="wrapper">

            <form name="form" ></form>
            <p>
                <span>用户名：</span>
                <input type="text" class="inputbox" name="Username" id="name" placeholder="请输入用户名">
                <input type="button" value="校验用户名是否合法" >
            </p>

            <p>
                <span>密码：</span>
                <input type="password" class="inputbox" id="password" placeholder="请输入密码">
            </p>
            <p>
                <span>确认密码：</span>
                <input type="password" class="inputbox" id="confpassword" placeholder="请再次输入密码">
            </p>

            <p>
                <span>性别：</span>
                <input type="radio" value="M" name="sex">男
                <input type="radio" value="F" name="sex">女
            </p>

            <p>
                <span>爱好：</span>
                <input type="checkbox" value="basketball" name="hobby">
                <label for="basketball">篮球</label>
                <input type="checkbox" value="run" name="hobby">
                <label for="run">跑步</label>
                <input type="checkbox" value="swim" name="hobby">
                <label for="swim">游泳</label>
            </p>

            <p>
                <span>专业：</span>
                <select id="subject" >
                    <option value="computer">计算机应用与技术</option>
                    <option value="software">软件技术</option>
                </select>
            </p>

            <span>个人简介：</span>
            <textarea cols="50" rows="30" id="intro"></textarea>

            <p>
                <span>头像：</span>
                <input type="file" name="file">
            </p>
            <div class="btns">
                <p>
                    <input type="button" value="提交" id="submit">
                    <input type="button" value="重置" id="clear">
                </p>
            </div>
            
        </div>
        
        <div id="result"></div>
	</body>
</html>
